<template>
  <!-- 风险四色图 -->
  <div class="fourcolorchart">
    <basic-container>

      <div style="margin-bottom: 16px;">

        <!-- 导入 -->
        <el-upload
          class="sst_upload"
          accept="image/*" 
          action="/api/fileManager/upload/file"
          :headers="SetHeaders"
          :on-success="uploadSSTSuccess"
        >
          <el-button 
            type="success" 
            size="small" 
            plain 
            icon="el-icon-upload2">
            导 入
          </el-button>
        </el-upload>

        <!-- 导出 -->
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-download"
          @click="handleExport">
          导 出
        </el-button>

        <a :href="downloadHref" style="display:none;" id="downloadImg">下载图片</a>
        
      </div>

      <!-- 风险四色图 -->
      <div class="image_div">
        <el-image :src="bladeFile.fileUrl" style="max-width: calc(100% - 30px); max-height: calc(100% - 30px)">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
            <span>风险四色图</span>
          </div>
        </el-image>
      </div>

    </basic-container>
  </div>
</template>

<script>
import {getList, add, update} from "@/api/saferisk/riskfourcolorfigure";
import { getToken } from "@/util/auth";

export default {
  data() {
    return {
      sstFile: {},
      bladeFile: {},
      downloadHead: "/api/fileManager/download/",
      downloadHref: "",
      SetHeaders: { "Blade-Auth": getToken() },
    };
  },
  mounted() {
    this.getRiskImage();
  },
  methods: {

    // 获取风险四色图
    getRiskImage() {
      getList().then(res => {
        if(res.data.success !== true) {
          return;
        }
        var resData = res.data.data;
        this.sstFile = resData.records.length !==0 ? resData.records[0] : {};
        this.bladeFile = resData.records.length !==0 ? resData.records[0].bladeFile : {};
        this.downloadHref = resData.records.length !==0 ? this.downloadHead + resData.records[0].sstwj : "";
      });
    },

    // 导出
    handleExport() {
      if(this.downloadHref === "") {
        this.$message.warning("请先导入风险四色图!");
        return;
      }
      this.$confirm("是否导出风险四色图?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        document.getElementById("downloadImg").click();
      });
    },

    // 上传四色图成功
    uploadSSTSuccess(response) {
      if(response.code !== 200 || response.success !== true) {
        return;
      }
      let row = {sstwj: response.data.id};
      if(JSON.stringify(this.sstFile) !== "{}" && this.sstFile.id !== "") {
        row["id"] = this.sstFile.id;
        row["isDeleted"] = this.sstFile.isDeleted;
      }
      if(row.id === undefined || row.id === "") {
        add(row).then(res => {
          if(res.data.success !== true) {
            this.$message.error("导入四色图失败!");
            return;
          }
          this.getRiskImage();
        });
      } else {
        update(row).then(res => {
          if(res.data.success !== true) {
            this.$message.error("导入四色图失败!");
            return;
          }
          this.getRiskImage();
        });
      }
    }

  }
};
</script>

<style lang="scss" scpoed >
.fourcolorchart {
  .basic-container {
    .el-card {
      .el-card__body {
        height: calc(100% - 70px);
      }
    }
  }

  .image_div {
    width: 100%;
    height: calc(100% - 60px);
    background: #f5f7fa;
    color: #909399;
    font-size: xxx-large;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sst_upload {
    float: left; 
    margin-right: 10px;

    .el-upload-list {
      display: none;
    }
  }
}
</style>